<script setup lang="ts">
interface Prop {
  eventHooks: any;
}
const props = defineProps<Prop>();
</script>

<template>
  <div
      id="menu"
      class="right-menu"
      :style="props.eventHooks.HooksData.rightMenuPosition"
      @contextmenu.prevent=""
      ref="rightMenu"
  >
    <div class="dropdown">
      <el-select v-model="props.eventHooks.HooksData.selectedType" @change='props.eventHooks.handleChange' size="small" effect="dark" popper-class="rightmenu-dropdown">
        <el-option
            v-for="item in props.eventHooks.HooksData.selectOption"
            :key="item.value"
            :label="item.name"
            :value="item.value"
        />
      </el-select>
    </div>
    <div class="del-wap" @click="props.eventHooks.showDelConfirm">
      <a-popconfirm
          v-model="props.eventHooks.HooksData.popVisible"
          content="你确定要删除吗?"
          okText="确定"
          cancelText="取消"
          type="warning"
          @ok="props.eventHooks.rightDelClick"
      >
        <i class="iconfont icon-shanchu"></i>
      </a-popconfirm>
    </div>
  </div>
</template>

<style scoped lang="less">
.right-menu {
  width: 168px;
  height: 32px;
  position: absolute;
  background-color: #42484c;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  .dropdown{
    width: 120px;
    height: 24px;
    margin-right: 12px;
    :deep(.el-input__wrapper){
      background-color: #42484c;
      .el-input__inner{
        color: #fff;
      }
    }
  }
  .del-wap{
    width: 20px;
    height: 20px;
    color: #CCCCCC;
  }
}
</style>